<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-permission="['Admin.Version.Update']"
        :disabled="itemsChecked.length === 0"
        class="filter-item"
        type="primary"
        icon="el-icon-upload2"
        @click="updateVersionAlls()"
      >批量更新AB NET
      </el-button>
      <el-button
        v-permission="['Admin.Version.Update']"
        :disabled="itemsChecked.length === 0"
        class="filter-item"
        type="primary"
        icon="el-icon-upload2"
        @click="updateVersionDgs()"
      >批量更新B NET
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="versionData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
      <el-table-column label="网关ID" prop="id" min-width="190"></el-table-column>
      <el-table-column label="A NET版本" prop="dcVersion" width="100" align="center"></el-table-column>
      <el-table-column label="B NET版本" prop="dgVersion" width="100" align="center"></el-table-column>
      <el-table-column :label="'数采上次更新时间'" prop="creationTime" sortable="custom" width="180" align="center">
        <template slot-scope="{row}">
          <span v-if="row.dcUpdateTime">{{ row.dcUpdateTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="'B NET上次更新'" prop="creationTime" sortable="custom" width="180" align="center">
        <template slot-scope="{row}">
          <span v-if="row.dgUpdateTime">{{ row.dgUpdateTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="280" class-name="small-padding">
        <template slot-scope="{row}">
          <el-button v-permission="['Admin.Version.Update']" size="mini" type="primary" @click="updateVersionAlls(row.id)">更新AB NET</el-button>
          <el-button v-permission="['Admin.Version.Update']" size="mini" type="primary" @click="updateVersionDgs(row.id)">更新B NET</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page-index.sync="q.page"
      :page-size.sync="q.size"
      @pagination="getVersionAlls"
    />
  </div>
</template>

<script>
  import {
    getVersionAlls,
    updateVersionAlls,
    updateVersionDgs
  } from "@/api/version";
  import Pagination from "@/components/Pagination";
  import _ from "lodash";

  export default {
    components: {
      'pagination': Pagination
    },
    data() {
      return {
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        versionData: [],
        itemsChecked: [],
        q: {
          page: 1,
          size: 10
        },
        totalCount: 0
      };
    },
    computed: {},
    created() {
      this.getVersionAlls();
    },
    methods: {
      getVersionAlls() {
        this.tableLoading = true;
        getVersionAlls(this.q).then(result => {
          this.versionData = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      indexMethod(index) {
        return this.q.size * (this.q.page - 1) + index + 1;
      },
      selectionChange(selection) {
        this.itemsChecked = selection;
      },
      updateVersionAlls(id) {
        let selectedIds = [];
        if (id) {
          selectedIds = [id];
        } else {
          selectedIds = this.itemsChecked.map(item => _.parseInt(item.id));
          if (selectedIds.length <= 0) {
            this.$message({ message: "至少选中一条记录", type: "warning" });
            return;
          }
        }
        console.log(selectedIds);
        this.$confirm("是否继续?", "确定执行批量更新AB NET操作吗？", {
          type: "warning"
        })
          .then(() => {
            updateVersionAlls(selectedIds).then(() => {
              this.getVersionAlls();
              this.$message({ message: "更新成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      updateVersionDgs(id) {
        let selectedIds = [];
        if (id) {
          selectedIds = [id];
        } else {
          selectedIds = this.itemsChecked.map(item => _.parseInt(item.id));
          if (selectedIds.length <= 0) {
            this.$message({ message: "至少选中一条记录", type: "warning" });
            return;
          }
        }
        console.log(selectedIds);
        this.$confirm("是否继续?", "确定执行批量更新B NET操作吗？", {
          type: "warning"
        })
          .then(() => {
            updateVersionDgs(selectedIds).then(() => {
              this.getVersionAlls();
              this.$message({ message: "更新成功", type: "success" });
            });
          })
          .catch(() => {
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .full-container {
    min-height: calc(100vh - 50px);
  }

  .aside-left {
    margin-bottom: 0;
  }

  .aside-header {
    display: flex;
    align-items: center;
    font-weight: bold;

    &:before {
      content: '';
      display: inline-block;
      margin-right: 5px;
      width: 4px;
      height: 16px;
      background-color: #000000;
    }
  }

  .aside-left-ul {
    margin: 0;
    list-style: none;
    padding-left: 0;

    li {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 40px;
      cursor: pointer;
      border-bottom: 1px dashed #ccc;

      &:before {
        display: inline-block;
        margin-right: 10px;
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #000;
      }

      &:after {
        position: absolute;
        top: 12px;
        z-index: 1;
        right: 0;
        content: "\E6E0";
        font-family: 'element-icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      &.active {
        color: #1890ff;
        border-color: #1890ff;
        border-bottom-style: solid;

        &:before {
          background-color: #1890ff;
          border-color: #1890ff;
        }
      }

      & > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .app-container{
    flex: 1;
    overflow: hidden;
  }
</style>
